<template>
	<div class="video-table-container" v-if="tableVideoDialog">
		<el-dialog :title="videoType === 'silent' ? '静默视频' : '播报视频'" :visible.sync="tableVideoDialog" width="64%" :before-close="cancel" class="broadcast-video" append-to-body>
			<div class="table-contents">
				<el-table :data="tableData" border style="width: 100%" empty-text="暂无数据" highlight-current-row @row-click="itemsRowClick">
					<el-table-column label width="35">
						<template slot-scope="scope">
							<el-radio :label="scope.row.id" v-model="selectedId" :disabled="showDetail"></el-radio>
						</template>
					</el-table-column>
					<el-table-column label="序号" type="index" width="50" align="center"> </el-table-column>
					<el-table-column label="视频文件" width="260" prop="fileName" align="center"> </el-table-column>
					<el-table-column width="auto" prop="description" align="center">
						<template slot="header" slot-scope="scope">
							<span>字幕填充</span>
							<el-popover placement="top-start" trigger="hover" content="字幕填充AI坐席拟合方式为预录制视频+视频原声时AI坐席播报阶段访客端展示的字幕内容">
								<i class="icon-question" slot="reference"></i>
							</el-popover>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" prop="btns" width="80">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="preview(scope.row)">预览</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<span slot="footer" class="dialog-footer" v-if="!showDetail">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="ok">确 定</el-button>
			</span>
			<p class="error-info" v-show="showErrorTips">* {{ errorInfo }}</p>
			<div class="page-contents">
				<PageSize :pages="videoPages" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
			</div>
			<VideoPreview :isShow="showVideoPreview" :url="videoUrl" @close="closeVideoPreview" />
		</el-dialog>
	</div>
</template>

<script>
import PageSize from '@/views/components/PageSize.vue';
import VideoPreview from './VideoPreview.vue';
import { getAiworkFlowVideoList } from '@/api/api.js';
import { mapState, mapActions } from 'vuex';
import { appendToken } from '@/utils/tool';
export default {
	components: {
		PageSize,
		VideoPreview
	},
	props: {
		tableVideoDialog: {
			type: Boolean,
			default: () => false,
			required: true
		},
		videoType: {
			type: String,
			default: () => '',
			required: true
		},
		videoSlect: {
			type: [String, Number],
			default: ''
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		}
	},
	data() {
		return {
			errorInfo: '请选择视频',
			selectedId: this.videoSlect,
			selected: {},
			showErrorTips: false,
			showVideoPreview: false,
			videoUrl: '',
			tableData: [],
			requestType: ''
		};
	},
	mounted() {
		this.requestType = this.videoType === 'silent' ? 'mute' : 'normal';
		this.initVideoList(this.requestType);
		this.selectedId = this.checkedVideoId ? this.checkedVideoId : this.selectedId;
	},
	computed: {
		...mapState({
			bizflowId: state => state.uploadVideo.bizflowId,
			speakVideoData: state => state.uploadVideo.speakVideoData,
			silentVideoData: state => state.uploadVideo.silentVideoData,
			videoPages: state => state.uploadVideo.pages
		})
	},
	methods: {
		...mapActions('uploadVideo', ['setVideoBizflowId', 'setVideoPages', 'setSilentVideoData', 'setSpeakVideoData']),
		/** 选择视频逻辑 */
		ok() {
			let { selectedId, selected, tableData } = this;
			selected.content = selected.description;
			if (!selectedId) {
				this.showErrorTips = true;
				return;
			}
			// 为空赋值
			if (!selected.id) {
				selected = tableData.find(currentValue => {
					if (currentValue.id === selectedId) {
						return true;
					}
				});
			}
			if (!selected.id) {
				return false;
			}
			this.showErrorTips = false;
			this.$emit('ok', selectedId, selected);
		},
		cancel() {
			this.selectedId = '';
			this.tableData = [];
			this.$emit('update:tableVideoDialog', false);
			this.$emit('cancel', this.selectedId);
		},
		/** 预览视频 */
		preview(data) {
			this.showVideoPreview = true;
			this.videoUrl = appendToken(data.url);
		},
		closeVideoPreview() {
			this.videoUrl = '';
			this.showVideoPreview = false;
		},

		/** 分页逻辑 */
		changePageSize(pageSize) {
			this.setVideoPages({ ...this.videoPages, pageSize });
			this.initVideoList(this.requestType);
		},
		changeCurrentPage(page) {
			this.setVideoPages({ ...this.videoPages, page });
			this.initVideoList(this.requestType);
		},

		/** 选择项 */
		itemsRowClick(data, props) {
			if (props.property === 'btns') {
				return;
			}
			this.selectedId = data.id;
			this.selected = data;
		},

		/** 初始化拉取视频列表 */
		async initVideoList(type) {
			try {
				let data = {
					bizflowId: this.bizflowId,
					type: type,
					page: this.videoPages.page,
					pageSize: this.videoPages.pageSize
				};
				let result = await getAiworkFlowVideoList(data);
				const { total, list } = result.data;
				if (type === 'mute') {
					this.setSilentVideoData(list);
					this.setVideoPages({ ...this.videoPages, total });
				} else {
					this.setSpeakVideoData(list);
					this.setVideoPages({ ...this.videoPages, total });
				}
				this.tableData = list;
			} catch (error) {
				this.$message.error('初始化视频列表失败！');
				console.log(error);
			}
		}
	}
};
</script>

<style lang="less" scoped>
.error-info {
	color: #ef5753;
}
.icon-question {
	display: inline-block;
	width: 14px;
	height: 14px;
	cursor: pointer;
	background: url(@/assets/img/aiworkflowimage/grayQuestion.png) no-repeat;
}
.page-contents {
	padding: 10px 0;
}
</style>

<style lang="less">
.table-contents {
	.el-radio__label {
		display: none;
	}
	.el-table__cell.is-leaf {
		background: #f8f8f9;
	}
}
.el-popover {
	max-width: 380px;
	background: #f6f6f6;
	border: 1px solid #d3d3d3;
	box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	font-size: 12px;
	color: #333333;
	white-space: normal;
	word-break: break-all;
}
</style>
